/*
在CSS中，:root 是一个伪类选择器，它匹配文档树的根元素。在HTML文档中，根元素始终是 <html> 元素。:root 选择器通常用于定义在整个文档中都可以使用的变量（也称为CSS自定义属性）。
*/
:root {
  /*
  角度(30deg): 这指定了渐变的方向。在这个例子中，渐变从左下角开始，沿着30度的方向向右上方进行。
  颜色停靠点（color stops）：
      #f39c12 30%：这表示在渐变线的30%位置有一个颜色停靠点，颜色为#f39c12（一种橙色）。这意味着从渐变的开始到30%的位置，背景色将是#f39c12。
      #f1c40f：由于这里没有指定位置，它默认是渐变线的终点（即100%的位置）。所以，从30%的位置到渐变的终点，背景色将从#f39c12平滑过渡到#f1c40f（一种黄色）。
  */
  --background: linear-gradient(30deg, #f39c12 30%, #f1c40f);
  --background-select: linear-gradient(to left, #34495e 3rem, #2c3e50 3rem);
}
/*
这段代码的作用是将border-box盒模型应用于页面上的所有元素以及这些元素的所有::before和::after伪元素。这意味着，无论您如何设置元素的宽度、边框和内边距，它们的总尺寸都将保持不变，从而简化了布局和尺寸计算。
*/
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  display: grid;
  place-content: center;
  min-height: 100vh;
  background: var(--background);
  color: white;
}

/*
对<select>元素进行了样式重置，以去除其默认的外观和某些交互效果
*/
select {
  appearance: none; /*这个属性用于改变元素的用户界面元素的默认外观。在<select>元素上设置appearance: none;会去除浏览器为其提供的默认下拉样式（如箭头）。请注意，这个属性在某些旧版浏览器中可能不受支持，或者需要使用带有浏览器前缀的版本（如-webkit-appearance、-moz-appearance等）。*/
  border: 0; /*这会移除<select>元素的边框。如果你想自定义边框，可以在这里添加自己的边框样式*/
  outline: 0; /*当元素获得焦点时（例如，当用户点击它时），大多数浏览器会在元素周围显示一个轮廓线（outline）。这个属性会移除这个轮廓线。然而，出于可访问性的考虑，通常不建议完全移除轮廓线，因为这对于视力障碍用户来说可能是一个重要的视觉提示。相反，你可以考虑自定义轮廓线的样式，使其既符合设计要求，又保持可访问性。*/
  background: none; /*这会移除<select>元素的背景。如果你想自定义背景，可以在这里添加自己的背景样式（如颜色、渐变、图片等）。  */
  color: inherit; /*这会使<select>元素的颜色继承其父元素的颜色。如果你不想使用继承的颜色，可以在这里指定一个具体的颜色值。  */
  box-shadow: none; /*这会移除<select>元素的盒子阴影。盒子阴影通常用于增加元素的深度和立体感。如果你想自定义盒子阴影，可以在这里添加自己的盒子阴影样式。  */
}
/*
在CSS中，select::-ms-expand是一个针对Internet Explorer（IE）和旧版Edge浏览器的特定伪元素选择器。这个伪元素代表了原生下拉选择框（<select>元素）右侧的小箭头按钮，这个按钮通常用于展开选项列表。
*/
select::-ms-expand {
  display: none;
}

/*
Custom Select wrapper 
通过背景色渐变的方式，让select框左边和右边是两个颜色，从右往左，3rem处是颜色分界，这样就视觉上是两个颜色区域。
*/
.select {
  position: relative;  /*这里，position: relative;被使用主要是为了允许子元素（如::after伪元素）使用绝对定位相对于.select元素进行定位。*/
  display: flex;
  width: min(20rem, 90vw); /*.select元素的宽度至少为20rem，但不会超过视口宽度的90%。*/
  background: var(--background-select);
  border-radius: 0.25rem;
  overflow: hidden;

  select {
    flex: 1; /*这行代码设置了<select>元素的flex属性。flex: 1;是flex-grow: 1;的简写，意味着该元素将能够伸展以填充其父容器中剩余的空间。这通常用于flex容器（即display属性为flex或inline-flex的元素）中的子元素，以便它们可以按需分配空间。如果父容器是flex容器，并且没有其他子元素设置了更大的flex-grow值，那么<select>元素将占据父容器中剩余的所有空间。*/
    padding: 1em; /*这行代码设置了<select>元素的内边距。1em是一个相对单位，它等于当前元素的字体大小。因此，内边距的大小将随着<select>元素字体大小的改变而改变。内边距增加了元素内部与其内容（在这个情况下是下拉列表的选项）之间的空间。*/
    cursor: pointer;
  }

  &::after {
    content: "\25BC"; /*：这行代码指定了::after伪元素的内容。\25BC是一个Unicode转义字符，代表向下的三角形（▼）。这意味着在元素的内容后面会显示一个向下的三角形。*/
    position: absolute; /*这行代码设置伪元素的定位方式为绝对定位。绝对定位的元素会脱离文档流，其位置相对于最近的已定位（即position属性不是static）的祖先元素进行定位。*/
    right: 1rem;
    top: 1rem;
    transition: 0.25s all ease; /*transition: 0.25s all ease;：这行代码为伪元素的所有可动画属性设置了一个过渡效果。过渡效果持续0.25秒，过渡动画的缓动函数为ease，意味着动画开始和结束时速度较慢，中间时速度较快。*/
    pointer-events: none; /*这行代码设置伪元素不会响应鼠标事件，如点击。这意味着即使用户点击了伪元素显示的位置，点击事件也会穿透伪元素，被其下方的元素捕获。*/
  }

  &:hover::after {
    color: #f39c12;
    animation: bounce 0.5s infinite;
  }
}

@keyframes bounce {
  25% {
    transform: translatey(5px);
  }
  75% {
    transform: translatey(-5px);
  }
}